<template>
	<view class="data-display-container">
		<view class="content-wrapper">
			<view class="info">
				<DataTipVue Tipcolor="#e7f5fe" DataText="9" TipText="设备总数"></DataTipVue>
				<DataTipVue Tipcolor="#e7ecf5" DataText="9" TipText="机房总数"></DataTipVue>
				<DataTipVue Tipcolor="#e7f5fe" DataText="9" TipText="警告通知"></DataTipVue>
				<DataTipVue Tipcolor="#e7ecf5" DataText="9" TipText="警告通知" decorationcolor="#e2e2e2"></DataTipVue>
			</view>
			<view class="charts">
				<view class="chart-container">
					<EchartsVue ref="EchartsRef"></EchartsVue>
				</view>
				<view class="chart-container">
					<EchartsVue ref="HorEchartsRef"></EchartsVue>
				</view>
			</view>
			<view class="charts">
				<view class="chart-container">
					<EchartsVue ref="PieEchartsRef"></EchartsVue>
				</view>
				<view class="chart-container">

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	//demo
import DeviceVue from '@/components/functions/Device.vue';
import DataTipVue from '@/components/Home//DataTip.vue';
import EchartsVue from '@/components/functions//Echarts.vue';
import VideoVue from '@/components/functions//Video.vue';
	// import DeviceListVue from '../../../components/Home/DeviceList.vue';
	
	export default {
		components: {
			DeviceVue,
			DataTipVue,
			EchartsVue,
			VideoVue
		},
		data() {
			return {
				chartData: {},
				ws: null,
				Data: [
					[],
					[],
					[],
					[]
				],
				piedata:[{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' }],
				pietitle:'Moxdoes',
				linedata:[[13,43,56,78],[23,67,45,23]],
				lineXdata: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
				horizontalbardata:[13, 29, 24, 17, 14, 23],
				horizontalbarYdata:['AA', 'ASC', 'USA', 'IaA', 'CAS', 'Wod'],
				horizontalbartitle:'World',
				columnopts: {
					padding: [15, 15, 10, 5],
					enableScroll: true,
					color: ["#1890FF", "#91CB74", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
					legend: {},
					xAxis: {
						itemCount: 3,
						scrollShow: true,

					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							categoryGap: 20,
							width: 200
						}
					}
				}
			}
		},
		
		created() {
			
			// uni.hideTabBar({});
			this.ws = uni.connectSocket({
				url: 'ws://192.168.1.111:8080/HistoryData',
				success: () => {
					console.log('WebSocket连接成功');
				}
			});
			this.ws.onMessage((e) => {
				let obj = JSON.parse(e.data);
				console.log(obj)
				switch (obj.topic) {
					case 't_data':
						for (let i = 0; i < obj.data.length; i++) {
							this.Data[0].push(obj.data[i].field1)
							this.Data[1].push(obj.data[i].field2)
							this.Data[2].push(obj.data[i].field3)
							this.Data[3].push(obj.data[i].c_time)
						}
						console.log(this.Data)
						this.upchartsdata()
						break;
					default:
						break;
				}
			})
		},

		mounted() {
			this.$nextTick(() => {
				this.$refs.EchartsRef.updatalinecharts(this.linedata, this.lineXdata)
				this.$refs.HorEchartsRef.updatahorizontalbarcharts(this.horizontalbardata, this.horizontalbarYdata, this.horizontalbartitle)
				this.$refs.PieEchartsRef.updatapiecharts(this.piedata, this.pietitle)
			})
		},
		
		beforeUnmount() {
			
		},
		
		methods: {
			Change()
			{
				this.$currentdevice=2
				console.log(this.$currentdevice)
			},
			upchartsdata() {
				setTimeout(() => {
					let res = {
						categories: this.Data[3],
						series: [{
								name: "目标值",
								data: this.Data[2]
							},
							{
								name: "完成量",
								data: this.Data[1]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-display-container {
		width: 100%;
	}
	
	.content-wrapper {
		padding: 20rpx;
	}
	.info{
		display: flex;
		gap: 15rpx;
	}
	
	.charts {
		margin-top: 20rpx;
		display: grid;
		grid-gap: 10rpx;
		grid-template-columns: 1fr; /* 移动端默认一列 */
		grid-template-rows: repeat(2, 1fr);
	}
	
	.chart-container {
		background-color:#f5f6f8;
		border-radius: 10rpx;
		padding: 10rpx;
		height: 300rpx; /* 默认高度 */
	}
	
	/* 移动端适配 - 针对小屏幕优化 */
	@media screen and (max-width: 414px) {
		.chart-container {
			width: 700rpx;
			height: 300rpx; 
			padding: 8rpx;
		}
		
		.charts {
			grid-gap: 15rpx;
		}
	}
	
	/* 平板及以上设备 */
	@media screen and (min-width: 415px) and (max-width:769px) {
		.charts {
				grid-template-columns: repeat(1, 1fr);
				grid-template-rows: repeat(1, 1fr);
			}
		
			.chart-container {
				height: 320rpx;
				width: 600rpx;
			}
	}
	
	
	@media screen and (min-width: 770px) and (max-width:1023px) {
		.charts {
			grid-template-columns: repeat(1, 1fr);
			grid-template-rows: repeat(1, 1fr);
		}
		
		.chart-container {
			height: 400rpx;
			width: 600rpx;
		}
	}
	
	/* 大屏幕PC适配 */
	@media screen and (min-width: 1024px) {
		.charts {
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(1, 1fr);
			}
		
			.chart-container {
				height: 500rpx;
			}
	}
</style>